<template>
	<div class="sale">
		<div class="second-img">
			<img src="../assets/second.png">
		</div>

<van-count-down :time="time">
  <template v-slot="timeData"  >
    <button class="item"  @click="index()">跳过{{ timeData.seconds }}</button>
  </template>
</van-count-down>
	<van-swipe @change="onChange" class="swipe">
	  <van-swipe-item><img src="../assets/mei3.png"></van-swipe-item>	
	  <div class="custom-indicator" slot="indicator">
	    {{ current + 1 }}/1
	  </div>
	  </van-swipe>
	</div>
	
</template>

<script>
	export default {
	  name: 'Second',
	    data() {
    return {
      current: 0,
	  time:4*1000
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
	 index(){
	  this.$router.push('/index')
	}
  },
  mounted(){
  const timer = setInterval(() =>{                    
   this.$router.push('/index')
      // 某些定时器操作                
  }, 4000);            
  // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
  this.$once('hook:beforeDestroy', () => {            
      clearInterval(timer);                                    
  })
   
  
  }
	  }
</script>

<style scoped="">
	 img{
		width: 100%;
		height: 450px;
	}
	.sale{
		margin-top: -60px;
		
	}
	.template{
		width: 332px;
		height: 100%;
		/* margin-bottom: 32px; */
	}
	.swipe{
		width: 100%;
		height: 220px;
		position: absolute; 
		/* left: 50px; */
		position: relative;
		 background-color:#eeeeee;
	}
	.swipe .custom-indicator{
		position: absolute;
		right: 30px;
		font-size: 10px;
		bottom: 20px;
	}
	.swipe .van-swipe-item img{
		width: 173px;
		height: 74px;
		margin-top: 70px;
	}
	.sale .btn{
		opacity:inherit ;
	}
	.item {
 /* display: inline-block; */
  width: 50px;
  height: 20px;
  right: 15px;
  top:10px;
  color: #fff;
  font-size: 11px;
  text-align:center;
  border: 1px solid white;
  background: #542801;
  /* background: #e0000000; */
  /* background-color:transparent; */
  opacity: 1;
 /* opacity: initial; */
  z-index: 99;
  position: absolute;
} 
</style>
